<link rel="stylesheet" href="js/lay-module/dtree/dtree.css">
<link rel="stylesheet" href="js/lay-module/dtree/font/dtreefont.css">
<style>
    .welcome .layui-card {border:1px solid #f2f2f2;border-radius:5px;}
    .welcome .icon {margin-right:10px;color:#1aa094;}
    .welcome .icon-cray {color:#ffb800 !important;}
    .welcome .icon-blue {color:#1e9fff !important;}
    .welcome .icon-tip {color:#ff5722 !important;}
    .welcome .layuimini-qiuck-module {text-align:center;margin-top:10px}
    .welcome .layuimini-qiuck-module a i {display:inline-block;width:100%;height:60px;line-height:60px;text-align:center;border-radius:2px;font-size:30px;background-color:#F8F8F8;color:#333;transition:all .3s;-webkit-transition:all .3s;}
    .welcome .layuimini-qiuck-module a cite {position:relative;top:2px;display:block;color:#666;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;font-size:14px;}
    .welcome .welcome-module {width:100%;height:210px;}
    .welcome .panel {background-color:#fff;border:1px solid transparent;border-radius:3px;-webkit-box-shadow:0 1px 1px rgba(0,0,0,.05);box-shadow:0 1px 1px rgba(0,0,0,.05)}
    .welcome .panel-body {padding:10px}
    .welcome .panel-title {margin-top:0;margin-bottom:0;font-size:12px;color:inherit}
    .welcome .label {display:inline;padding:.2em .6em .3em;font-size:75%;font-weight:700;line-height:1;color:#fff;text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:.25em;margin-top:.3em;}
    .welcome .layui-red {color:red}
    .welcome .main_btn > p {height:40px;}
    .welcome .layui-bg-number {background-color:#F8F8F8;}
    .welcome .layuimini-notice:hover {background:#f6f6f6;}
    .welcome .layuimini-notice {padding:7px 16px;clear:both;font-size:12px !important;cursor:pointer;position:relative;transition:background 0.2s ease-in-out;}
    .welcome .layuimini-notice-title,.layuimini-notice-label {padding-right:70px !important;text-overflow:ellipsis !important;overflow:hidden !important;white-space:nowrap !important;}
    .welcome .layuimini-notice-title {line-height:28px;font-size:14px;}
    .welcome .layuimini-notice-extra {position:absolute;top:50%;margin-top:-8px;right:16px;display:inline-block;height:16px;color:#999;}
</style>

<div class="layuimini-container layuimini-page-anim">
    <div class="layuimini-main welcome">
        <div class="layui-row layui-col-space15">
            <!-- 服务列表 -->
            <div class="layui-col-md2">
                <div class="layui-card">
                    <ul id="demoTree" class="dtree" data-id="0"></ul>
                </div>
            </div>
            <!-- 配置详情 -->
            <div class="layui-col-md10">
                <div class="layui-card">
                    <div class="layui-tab layui-tab-brief" lay-filter="sysconf">
                    <ul class="layui-tab-title">
                        <li class="layui-this" lay-id="app">APP设置</li>
                        <li lay-id="database">数据库设置</li>
                        <li lay-id="redis">Redis设置</li>
                        <li lay-id="jwt">JWT设置</li>
                        <li lay-id="etcd">ETCD设置</li>
                        <li lay-id="mq">MQ设置</li>
                        <li lay-id="es">ES设置</li>
                        <li lay-id="log">日志监听设置</li>
                        <li lay-id="email">报警邮箱设置</li>
                    </ul>
                    <div class="layui-tab-content">
                        <!-- APP设置 -->
                        <div class="layui-tab-item layui-show">
                            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
                                <legend>APP设置</legend>
                            </fieldset>
                            <form class="layui-form layuimini-form" lay-filter="app" id="app" action="">
                                <div class="layui-form-item">
                                    <label class="layui-form-label">名称</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="name" lay-verify="" lay-reqtext="项目名称不能为空" placeholder="请输入" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">端口</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="port" lay-verify="" lay-reqtext="端口不能为空" placeholder="请输入" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">角色</label>
                                    <div class="layui-input-block">
                                        <input type="radio" name="role" value="client" title="客户端" checked="">
                                        <input type="radio" name="role" value="server" title="服务端">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">Info日志</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="log[info]"  placeholder="请输入日志路径" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">Error日志</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="log[error]"  placeholder="请输入日志路径" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">Debug日志</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="log[debug]"  placeholder="请输入日志路径" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">Warn日志</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="log[warn]"  placeholder="请输入日志路径" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <div class="layui-input-block">
                                        <button class="layui-btn" type="button" lay-submit="" lay-filter="app">立即提交</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <!-- 数据库设置 -->
                        <div class="layui-tab-item">
                            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
                                <legend>数据库设置</legend>
                            </fieldset>

                            <form class="layui-form layuimini-form" lay-filter="database" id="database" action="">
                                <div class="layui-form-item">
                                    <label class="layui-form-label">驱动</label>
                                    <div class="layui-input-block">
                                        <input type="radio" name="driver" value="mysql" title="mysql" checked="">
                                        <!--                                <input type="radio" name="driver" value="sqlite" title="sqlite">-->
                                        <!--                                <input type="radio" name="driver" value="postgres" title="postgres">-->
                                        <!--                                <input type="radio" name="driver" value="mssql" title="mssql">-->
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">IP地址</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="host" lay-verify="" lay-reqtext="IP地址不能为空" placeholder="请输入IP地址" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">端口</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="port" lay-verify="" lay-reqtext="端口不能为空" placeholder="请输入端口" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">数据库名称</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="dbname" lay-verify="" lay-reqtext="数据库名称不能为空" placeholder="请输入数据库名称" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">用户名</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="username" lay-verify="" lay-reqtext="用户名不能为空" placeholder="请输入用户名" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">密码</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="password" lay-verify="" lay-reqtext="密码不能为空" placeholder="请输入密码" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">字符集</label>
                                    <div class="layui-input-block">
                                        <input type="radio" name="charset" value="utf8mb4" title="utf8mb4" checked="">
                                        <input type="radio" name="charset" value="utf8" title="utf8">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">表前缀</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="prefix"  placeholder="" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">时区</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="timezone"  value="Asia%2FShanghai" lay-verify="" lay-reqtext="时区不能为空"  placeholder="请输入时区" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <div class="layui-input-block">
                                        <button class="layui-btn" type="button" lay-submit="" lay-filter="database">立即提交</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <!-- Redis设置 -->
                        <div class="layui-tab-item">
                            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
                                <legend>Redis设置</legend>
                            </fieldset>

                            <form class="layui-form layuimini-form" lay-filter="redis" id="redis" action="">
                                <div class="layui-form-item">
                                    <label class="layui-form-label">驱动</label>
                                    <div class="layui-input-block">
                                        <input type="radio" name="driver" value="tcp" title="tcp" checked="">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">IP地址</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="host" lay-verify="" lay-reqtext="IP地址不能为空" placeholder="请输入IP地址" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">端口</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="port" lay-verify="" lay-reqtext="端口不能为空" placeholder="请输入端口" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">数据库</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="database" lay-verify="" lay-reqtext="数据库名称不能为空" placeholder="请输入数据库名称" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">密码</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="password" lay-verify="" lay-reqtext="密码不能为空" placeholder="请输入密码" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <div class="layui-input-block">
                                        <button class="layui-btn" type="button" lay-submit="" lay-filter="redis">立即提交</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <!-- JWT设置 -->
                        <div class="layui-tab-item">
                            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
                                <legend>JWT设置</legend>
                            </fieldset>

                            <form class="layui-form layuimini-form" lay-filter="jwt" id="jwt" action="">
                                <div class="layui-form-item">
                                    <label class="layui-form-label">密钥</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="secret" lay-verify="" lay-reqtext="密钥不能为空" placeholder="请输入密钥" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">过期时间</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="expire" lay-verify="" lay-reqtext="过期时间不能为空" placeholder="请输入过期时间" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <div class="layui-input-block">
                                        <button class="layui-btn" type="button" lay-submit="" lay-filter="jwt">立即提交</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <!-- ETCD设置 -->
                        <div class="layui-tab-item">
                            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
                                <legend>ETCD设置</legend>
                            </fieldset>

                            <form class="layui-form layuimini-form" lay-filter="etcd" id="etcd" action="">
                                <div class="layui-form-item">
                                    <label class="layui-form-label">IP地址</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="host" lay-verify="" lay-reqtext="IP地址不能为空" placeholder="请输入IP地址" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">端口</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="port" lay-verify="" lay-reqtext="端口不能为空" placeholder="请输入端口" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">用户名</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="username" lay-verify="" lay-reqtext="用户名不能为空" placeholder="请输入用户名" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">密码</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="password" lay-verify="" lay-reqtext="密码不能为空" placeholder="请输入密码" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">前缀</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="prefix"  placeholder="" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <div class="layui-input-block">
                                        <button class="layui-btn" type="button" lay-submit="" lay-filter="etcd">立即提交</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <!-- MQ设置 -->
                        <div class="layui-tab-item">
                            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
                                <legend>MQ设置</legend>
                            </fieldset>

                            <form class="layui-form layuimini-form" lay-filter="mq" id="mq" action="">
                                <div class="layui-form-item">
                                    <label class="layui-form-label">IP地址</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="host" lay-verify="" lay-reqtext="IP地址不能为空" placeholder="请输入IP地址" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">端口</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="port" lay-verify="" lay-reqtext="端口不能为空" placeholder="请输入端口" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">用户名</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="username" lay-verify="" lay-reqtext="用户名不能为空" placeholder="请输入用户名" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">密码</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="password" lay-verify="" lay-reqtext="密码不能为空" placeholder="请输入密码" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">最大重连次数</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="max_reconnect_num" lay-verify="" lay-reqtext="最大重连次数不能为空" placeholder="请输入最大重连次数" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">重连等待时间</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="wait_reconnect_time" lay-verify="" lay-reqtext="重连等待时间不能为空" placeholder="请输入重连等待时间" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <div class="layui-input-block">
                                        <button class="layui-btn" type="button" lay-submit="" lay-filter="mq">立即提交</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <!-- ES设置 -->
                        <div class="layui-tab-item">
                            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
                                <legend>ES设置</legend>
                            </fieldset>

                            <form class="layui-form layuimini-form" lay-filter="es" id="es" action="">
                                <div class="layui-form-item">
                                    <label class="layui-form-label">IP地址</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="host" lay-verify="" lay-reqtext="IP地址不能为空" placeholder="请输入IP地址" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">端口</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="port" lay-verify="" lay-reqtext="端口不能为空" placeholder="请输入端口" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">用户名</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="username" lay-verify="" lay-reqtext="用户名不能为空" placeholder="请输入用户名" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">密码</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="password" lay-verify="" lay-reqtext="密码不能为空" placeholder="请输入密码" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <div class="layui-input-block">
                                        <button class="layui-btn" type="button" lay-submit="" lay-filter="es">立即提交</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <!-- 日志监听设置 -->
                        <div class="layui-tab-item">
                            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
                                <legend>日志监听设置</legend>
                            </fieldset>

                            <form class="layui-form layuimini-form" lay-filter="log" id="log" action="">
                                <div class="layui-form-item layui-form-text">
                                    <label class="layui-form-label">日志文件路径</label>
                                    <div class="layui-input-block">
                                        <textarea name="logfiles" placeholder="请输入需要监控的日志文件路径，多个请用 “,” 隔开" class="layui-textarea"></textarea>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <div class="layui-input-block">
                                        <button class="layui-btn" type="button" lay-submit="" lay-filter="log">立即提交</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <!-- 报警邮箱设置 -->
                        <div class="layui-tab-item">
                            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
                                <legend>报警邮箱设置</legend>
                            </fieldset>

                            <form class="layui-form layuimini-form" lay-filter="email" id="email" action="">
                                <div class="layui-form-item">
                                    <label class="layui-form-label">smtp地址</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="server_host" lay-verify="" lay-reqtext="IP地址不能为空" placeholder="请输入IP地址" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">端口</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="server_port" lay-verify="" lay-reqtext="端口不能为空" placeholder="请输入端口" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">发件人邮箱地址</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="username" lay-verify="" lay-reqtext="用户名不能为空" placeholder="请输入用户名" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">发件人邮箱密码</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="password" lay-verify="" lay-reqtext="密码不能为空" placeholder="请输入密码" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item layui-form-text">
                                    <label class="layui-form-label">通知邮箱</label>
                                    <div class="layui-input-block">
                                        <textarea name="toers" placeholder="请输入需要通知邮箱，多个请用 “,” 隔开" class="layui-textarea"></textarea>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <div class="layui-input-block">
                                        <button class="layui-btn" type="button" lay-submit="" lay-filter="email">立即提交</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    checkLogin()
    layui.use(['jquery', 'form', 'layedit','dtree','element'], function () {
        var  $ = layui.jquery
            ,form = layui.form
            , layer = layui.layer
            , element = layui.element
            , dtree = layui.dtree;

        /**
         * 初始化表单，要加上，不然刷新部分组件可能会不加载
         */
        form.render();

        var data; //系统配置数据集合
        var key = "";  //系统配置key
        var layid = ""; //表单tab
        var list_select = "off"; //当前列表选中状态，默认没有选中 off ，选中后为 on
        // 初始化树
        var DTree1 = dtree.render({
            elem: "#demoTree",
            // ficon: ["0","7"],  // 设定一级图标样式。0表示方形加减图标，7表示文件图标
            // icon: "-1" // 不设定二级图标样式。
            initLevel: 1,
            // data: data,
            url:"/admin/etcd/sys/conf",
            headers : {Authorization: getToken()},
            response: {statusCode: 0, rootName: "data"},
            success: function(res, obj, first){
                var code = parseInt(res.code)
                if (code == 102) {
                    logout()
                    return
                }
                if (code > 0) {
                    layer.msg(res.message, {icon: 2});
                    return
                }
            },
            formatter: {
                title: function(data) {  // 示例给有子集的节点返回节点统计
                    var s = data.title;
                    if (data.children){
                        if (s == "/") {
                            s += ` <span style="color:blue" id="father_child_num" data-value="${data.children.length}">(${data.children.length})</span>`;
                        } else {
                            s += ` <span style="color:blue" id="${data.title}_child_num" data-value="${data.children.length}">(${data.children.length})</span>`;
                        }
                    }
                    return s;
                }
            },
            toolbar: true, //更多工具栏用法详见工具栏
            toolbarWay:"fixed",
            toolbarShow:["add","delete"],  // 这样就只会出现两个了
            toolbarFun: {
                addTreeNode: function(treeNode, $div){
                    if (parseInt(treeNode.level) > 3) {
                        layer.msg("配置目录最多3级", {icon: 2});
                        return
                    }
                    postData($,"/admin/etcd/sys/add-key",treeNode,function (res) {
                        // debugger
                        if (parseInt(res.code) == 0) {
                            var childNum = 0
                            var flag = false
                            if (treeNode.parentId == "/") {
                                flag = true
                                childNum = parseInt($("#father_child_num").attr("data-value"))
                            } else {
                                childNum = $("ul[data-id='"+treeNode.parentId+"']").find("li").length
                            }
                            if (childNum <= 1) {
                                if (flag) {
                                    childNum += 1
                                }
                                if (treeNode.parentId == "/") {
                                    $("cite[data-title='"+treeNode.parentId+"']").attr("data-leaf","node").html(`${treeNode.parentId}  <span style="color:blue" data-value="${childNum}" id="father_child_num">(${childNum})</span>`);
                                } else {
                                    $("cite[data-title='"+treeNode.parentId+"']").attr("data-leaf","node").html(`${treeNode.parentId}  <span style="color:blue" data-value="${childNum}" id="${treeNode.parentId}_child_num">(${childNum})</span>`);
                                }
                            } else {
                                if (treeNode.parentId == "/") {
                                    $(`#father_child_num`).attr("data-value",childNum).html(`(${childNum})`);
                                } else {
                                    $(`#${treeNode.parentId}_child_num`).attr("data-value",childNum).html(`(${childNum})`);
                                }
                            }
                            // DemoTree.changeTreeNodeAdd(treeNode.nodeId/param/true/false/"refresh")
                            DTree1.changeTreeNodeAdd(treeNode.context); // 添加成功，返回ID
                            DTree1.changeTreeNodeAdd(true); // 添加成功
                            DTree1.changeTreeNodeAdd("refresh"); // 添加成功，局部刷新树
                            resetForm()
                            list_select = 'off' //切换选中状态off
                        } else {
                            layer.msg(res.message, {icon: 2});
                        }
                    },function () {
                        DTree1.changeTreeNodeAdd(false);
                    })
                },
                delTreeNode: function(treeNode, $div){
                    // debugger
                    var childNum = 0
                    var flag = false
                    if (treeNode.parentId == "/") {
                        flag = true
                        childNum = parseInt($("#father_child_num").attr("data-value"))
                    } else {
                        childNum = $("ul[data-id='"+treeNode.parentId+"']").find("li").length
                    }
                    if (treeNode.leaf == false) {
                        childNum = $("ul[data-id='"+treeNode.context+"']").find("li").length
                    }
                    console.log(childNum)
                    if (treeNode.level == "1") {
                        layer.msg("顶级目录无法删除", {icon: 2});
                        return
                    }
                    if (treeNode.level == "2" && treeNode.leaf == false && childNum > 0) {
                        layer.msg("请先删除子节点", {icon: 2});
                        return
                    }
                    postData($,"/admin/etcd/sys/del-key",treeNode,function (res) {
                        if (parseInt(res.code) == 0) {
                            // debugger
                            DTree1.changeTreeNodeDel(true); // 删除成功
                            childNum -= 1;
                            var father = $("cite[data-title='"+treeNode.parentId+"']")
                            if (treeNode.leaf == false) {
                                father = $("cite[data-title='"+treeNode.context+"']")
                            }
                            if (childNum < 1) {
                                if (treeNode.leaf == false) {
                                    $(`cite[data-title="${treeNode.context}"]`).html(treeNode.context)
                                } else {
                                    $(`cite[data-title="${treeNode.parentId}"]`).html(treeNode.parentId)
                                }
                                father.attr("data-leaf","leaf")
                            } else {
                                if (treeNode.parentId == "/") {
                                    $(`#father_child_num`).attr("data-value",childNum).html(`(${childNum})`);
                                } else {
                                    $(`#${treeNode.parentId}_child_num`).attr("data-value",childNum).html(`(${childNum})`);
                                }
                            }
                            resetForm()
                            list_select = 'off' //切换选中状态off
                        } else {
                            layer.msg(res.message, {icon: 2});
                        }
                    },function () {
                        DTree1.changeTreeNodeDel(false);
                    })
                }
            }
        });

        // 绑定节点点击
        dtree.on("node('demoTree')" ,function(obj){
            // debugger
            if (layid == "") {
                layid = "app";
            }
            if (!obj.param.leaf) {
                resetForm()
                list_select = 'off' //切换选中状态off
                return
            }
            var level = parseInt(obj.param.level)
            if (level < 2) {
                resetForm()
                list_select = 'off' //切换选中状态off
                return
            }
            list_select = 'on' //切换选中状态on
            // layer.msg(JSON.stringify(obj.param));
            console.log(obj.param)
            key = "/"+obj.param.parentId+"/"+obj.param.context
            if (level == 2) {
                key = "/"+obj.param.context
            }
            postData($,"/admin/etcd/sys/info",obj.param,function (res) {
                if (parseInt(res.code) == 0) {
                    data = res.data
                    console.log(data)
                    // layer.msg(JSON.stringify(res.data));
                    initFormData()
                } else {
                    layer.msg(res.message, {icon: 2});
                }
            })
        });


        //监听Tab切换，以改变地址hash值
        element.on('tab(sysconf)', function(){
            layid =  this.getAttribute('lay-id');
            console.log(layid)
            initFormData()
        });

        function resetForm() {
            // debugger
            key = ""
            $(`#${layid}`)[0].reset()
        }

        //form表单初始赋值
       function initFormData() {

            if (data == undefined) {
                return
            }
           var obj;
           switch (layid) {
               case 'app' :
                   obj = {
                       //元素的name属性值：元素的value属性值
                       name : data.app.name,
                       port : data.app.port,
                       role : data.app.role,
                       "log[info]" : data.app.log['info'],
                       "log[error]" : data.app.log['error'],
                       "log[debug]" : data.app.log['debug'],
                       "log[warn]" : data.app.log['warn'],
                   };
                   break;
               case 'database' :
                   obj = {
                       //元素的name属性值：元素的value属性值
                       driver : data.db.name,
                       host : data.db.host,
                       port : data.db.port,
                       dbname : data.db.dbname,
                       username : data.db.username,
                       password : data.db.password,
                       charset : data.db.charset,
                       prefix : data.db.prefix,
                       timezone : data.db.timezone,
                   };
                   break;
               case 'redis' :
                   obj = {
                       //元素的name属性值：元素的value属性值
                       driver : data.redis.name,
                       host : data.redis.host,
                       port : data.redis.port,
                       database : data.redis.database,
                       password : data.redis.password,
                   };
                   break;
               case 'jwt' :
                   obj = {
                       //元素的name属性值：元素的value属性值
                       secret : data.jwt.secret,
                       expire : data.jwt.expire,
                   };
                   break;
               case 'etcd' :
                   obj = {
                       //元素的name属性值：元素的value属性值
                       host : data.etcd.host,
                       port : data.etcd.port,
                       username : data.etcd.username,
                       password : data.etcd.password,
                       prefix : data.etcd.prefix,
                   };
                   break;
               case 'mq' :
                   obj = {
                       //元素的name属性值：元素的value属性值
                       host : data.mq.host,
                       port : data.mq.port,
                       username : data.mq.username,
                       password : data.mq.password,
                       max_reconnect_num : data.mq.max_reconnect_num,
                       wait_reconnect_time : data.mq.wait_reconnect_time,
                   };
                   break;
               case 'es' :
                   obj = {
                       //元素的name属性值：元素的value属性值
                       host : data.es.host,
                       port : data.es.port,
                       username : data.es.username,
                       password : data.es.password,
                   };
                   break;
               case 'log' :
                   obj = {
                       //元素的name属性值：元素的value属性值
                       logfiles : data.logfiles,
                   };
                   break;
               case 'email' :
                   obj = {
                       //元素的name属性值：元素的value属性值
                       server_host : data.email.server_host,
                       server_port : data.email.server_port,
                       username : data.email.username,
                       password : data.email.password,
                       toers : data.email.toers,
                   };
                   break;
           }
           form.val(layid, obj);

       }

        //监听提交
        form.on(`submit(${layid})`, function (formData) {
            // debugger
            if (list_select == 'off') {  //先判断是否选择
                layer.msg("请在数据列表选择要操作的数据",{icon:2})
                return
            }
            if (layid == "") {  //在判断是否存在表单tab
                return
            }
            if (key == "") {  //判断保存的key是否存在
                layer.msg("请在数据列表选择要操作的数据",{icon:2})
                return
            }
            if (formData.field.addNodeName != undefined) {
                // var postKey = `/${formData.field.nodeTitle}/${formData.field.addNodeName}`
                // if (key != postKey ) {  //最后判断保存的key是否和提交的一致
                //     return
                // }
                resetForm()
                list_select = 'off' //切换选中状态off
                return
            }
            var temData = formData
            formData.field.form_key = key
            formData.field.conf_slot = layid

            // layer.alert(JSON.stringify(data.field), {
            //     title: '最终的提交信息'
            // })
            console.log(formData.field);
            postData($,"/admin/etcd/sys/save",formData.field,function (res) {
                if (parseInt(res.code) == 0) {
                    layer.msg("保存成功")
                    switch (layid) {
                        case 'app' :
                            data.app = temData.field
                            break;
                        case 'database' :
                            data.database = temData.field
                            break;
                        case 'redis' :
                            data.redis = temData.field
                            break;
                        case 'jwt' :
                            data.jwt = temData.field
                            break;
                        case 'etcd' :
                            data.etcd = temData.field
                            break;
                        case 'mq' :
                            data.mq = temData.field
                            break;
                        case 'es' :
                            data.es = temData.field
                            break;
                        case 'log' :
                            data.log = temData.field
                            break;
                        case 'email' :
                            data.email = temData.field
                            break;
                    }
                } else {
                    layer.msg(res.message, {icon: 2});
                }
            })
            return false;
        });

    });
</script>